<script setup>
import { ref, watch } from 'vue'
import NavItemPage from './components/NavItemPage.vue'
import NavItem from './components/NavItem.vue'
import goDetail from '@/utils/goDetail'
import { useHeadGoodsStore } from '@/stores'
const store = useHeadGoodsStore()

// 接口调用
import { homeBanner, homeBrand } from '@/api/home'

const show = ref(false)
const showBrand = ref(false)
// menu的标题
const menuList = ref([
  { id: 1, text: '居家 茶咖酒具 水具杯壶' },
  { id: 2, text: '美食 网易黑猪 水产海鲜' },
  { id: 3, text: '服饰 室外拖鞋 春夏潮鞋' },
  { id: 4, text: '母婴 T恤/polo/衬衫 卫衣/毛衫' },
  { id: 5, text: '个护 家庭清洁 浴室用品' },
  { id: 6, text: '严选 卫浴用品 高级珠宝' },
  { id: 7, text: '数码 影音娱乐 乐器' },
  { id: 8, text: '运动 登机箱 托运箱' },
  { id: 9, text: '杂项 乐器杂项' }
])

// 获取鼠标移入的li对应的id，及鼠标移入事件
const hoveredItemIndex = ref(null)
const handleMouseOver = event => {
  show.value = true
  showBrand.value = false
  hoveredItemIndex.value = event.target.dataset.index
}

const handleMouseOver2 = () => {
  show.value = false
  showBrand.value = true
  hoveredItemIndex.value = 9
}

const handleMouseLeave = () => {
  if (hoveredItemIndex.value < 9) {
    show.value = false
  }
  if (hoveredItemIndex.value === 9) {
    showBrand.value = false
  }
  hoveredItemIndex.value = null
}

// 获取首页轮播图
const homeBannerList = ref([])
const getHomeBanner = async () => {
  const res = await homeBanner()
  homeBannerList.value = res.data.result
}
getHomeBanner()

// 获取商品推荐
const homeCategoryHeadList = ref([])
watch(
  () => store.headGoods,
  newVal => {
    homeCategoryHeadList.value = newVal
  },
  { immediate: true }
)

// 获取品牌列表
const homeBrandList = ref([])
const getHomeBrand = async () => {
  const res = await homeBrand(6)
  homeBrandList.value = res.data.result
}
getHomeBrand()
</script>

<template>
  <div class="carousel">
    <div class="body__bottom">
      <el-carousel height="500px" motion-blur>
        <el-carousel-item v-for="item in homeBannerList" :key="item.id">
          <img :src="item.imgUrl" alt="" />
        </el-carousel-item>
      </el-carousel>
      <div class="body__top" @mouseleave="handleMouseLeave">
        <ul class="body__top__menu">
          <li
            class="body__top__menu__item"
            v-for="(item, index) in menuList"
            :key="item.id"
            :data-index="index"
            :class="{ hovered: hoveredItemIndex == index }"
            @mouseenter="handleMouseOver"
          >
            {{ item.text }}
          </li>
          <li
            class="body__top__menu__item"
            :class="{ hovered: hoveredItemIndex == 9 }"
            @mouseenter="handleMouseOver2"
          >
            品牌 品牌推荐
          </li>
        </ul>
        <div class="body__top__link" v-if="show">
          <div class="info">
            <span class="info1">分类推荐</span>
            <span class="info2">根据您的购买或浏览记录推荐</span>
          </div>
          <div class="link">
            <ul class="link__list">
              <li
                v-for="item in homeCategoryHeadList[hoveredItemIndex].goods"
                :key="item.id"
                class="link__list__item"
              >
                <NavItemPage
                  :name="item.name"
                  :desc="item.desc"
                  :price="item.price"
                  :picture="item.picture"
                  @click="goDetail(item.id)"
                />
              </li>
            </ul>
          </div>
        </div>
        <div class="body__top__link" v-if="showBrand">
          <div class="info">
            <span class="info1">分类推荐</span>
            <span class="info2">根据您的购买或浏览记录推荐</span>
          </div>
          <div class="link">
            <ul class="link__list">
              <li v-for="item in homeBrandList" :key="item.id" class="link__list__item">
                <NavItem
                  :name="item.name"
                  :desc="item.desc"
                  :place="item.place"
                  :picture="item.picture"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.carousel {
  height: 500px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  .body__bottom {
    height: 100%;
    width: 1240px;
    position: relative;
    :deep(.el-carousel__arrow--left) {
      left: 280px; /* 调整这个值以移动左箭头 */
    }
  }
  .body__top {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .body__top__menu {
      background-color: #111111;
      opacity: 0.85;
      width: 250px;
      height: 100%;
      padding-left: 0px;
      margin-top: 0px;
      list-style: none;
      color: #fff;
      font-size: 14px;
      .body__top__menu__item {
        margin-left: 0;
        height: 50px;
        padding-left: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;
        &:hover {
          background-color: #27ba9b;
        }
        &.hovered {
          background-color: #27ba9b;
        }
      }
    }
    .body__top__link {
      background-color: rgba(255, 255, 255, 0.85);
      height: 100%;
      width: 990px;
      position: absolute;
      top: 0;
      left: 250px;
      .info {
        margin: 30px 0px 20px 30px;
        .info1 {
          font-size: 22px;
          margin-right: 10px;
        }
      }
      .link {
        .link__list {
          padding-left: 10px;
          margin-top: 0px;
          list-style: none;
          flex-wrap: wrap;
          display: flex;
          .link__list__item {
            margin-left: 12px;
            margin-bottom: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
